<template>
    <div class="shop-list-container">
        <h1>购物列表</h1>



        <ul class="shop-header">
        <li>商品名称</li>
        <li>商品价格</li>
        <li>操作</li>
        </ul>


        <ul class="shop-list">
           <li v-for='(item,index) in $store.state.shopAllList' :key='index' >
         <span>{{item.goodsName}}</span>
         <span>{{item.goodsPrice}}</span>
         <button @click="addShopCar(item)">addShopCar</button>
           </li>

        </ul>
        <!-- {{$store.state.shopAllList}} -->
    </div>
</template>
 

 <script>
 export default {
    
 
     data() {
         return {
             
         };
     },
 
     mounted() {
         
     },
 
     methods: {
         addShopCar(data){
             this.$store.commit('addShopCarList',data)
         }
         
     },
 };
 </script>

 
<style scoped lang="scss">
h1 {
    margin: 0;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.shop-list-container {
    flex: 1;
    height: 100%;
    border-right: 2px solid #e4393c;
}

.shop-header {

    width: 100%;
    height: 30px;
    display: flex;
    justify-content: space-between;

    li {
        flex: 1;
        text-align: center;
        line-height: 30px;
        border: 1px solid #ddd;
        box-sizing: border-box;
    }
}

.shop-list {
    li {
        display: flex;
        justify-content: space-between;

        span {
            flex: 1;
            text-align: center;
            line-height: 25px;
        }

        .el-button {
            flex: 1;
        }
    }
}
</style>